<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsInstance } from 'element-plus'
import {useRouter} from 'vue-router'
import {ElMessage} from "element-plus";
const router = useRouter()
const tabPosition = ref<TabsInstance['tabPosition']>('left')
const tuichu = async ()=>{
  localStorage.clear()
  ElMessage.success('已安全退出')
  router.push('/login')
}
const name = JSON.parse(localStorage.getItem("name"))
const id = JSON.parse(localStorage.getItem("id"))
const tel = JSON.parse(localStorage.getItem("tel"))
const role = JSON.parse(localStorage.getItem("role"))
// const department = JSON.parse(localStorage.getItem("department"))

</script>

<template >
  <el-tabs :tab-position="tabPosition" style="height: 100%" class="demo-tabs">
    <el-tab-pane label="个人信息">
      <el-card style="max-width: 800px;text-align: center">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
          </div>
        </template>
        <el-descriptions
            direction="vertical"
            border
            style="margin-top: 20px;
            background-color:#F6F7FC;
            "
        >
          <el-descriptions-item
              :rowspan="2"
              :width="140"
              label="头像"
              align="center"
              style=" background-color:#F6F7FC;"
          >
            <el-image
                style="width: 100px; height: 100px"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </el-descriptions-item>
          <el-descriptions-item label="姓名">{{name}}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{tel}}</el-descriptions-item>
          <el-descriptions-item label="学院">计科院</el-descriptions-item>
          <el-descriptions-item label="身份">
            <el-tag size="small">老师</el-tag>
          </el-descriptions-item>
<!--          <el-descriptions-item label="个人简历"-->
<!--          >-->
<!--            ********************************************-->
<!--            ********************************************-->
<!--            ********************************************-->
<!--            ********************************************-->
<!--            ********************************************-->
<!--            ********************************************-->
<!--          </el-descriptions-item>-->
        </el-descriptions>
        <template #footer>欢迎</template>
      </el-card>

    </el-tab-pane>
    <el-tab-pane label="账号管理">
      <el-descriptions
          class="margin-top"
          title="账号信息"
          :column="1"

      >
        <template #extra>

        </template>
        <el-descriptions-item label="账号名称">{{name}}</el-descriptions-item>
        <el-descriptions-item label="账号">{{id}}</el-descriptions-item>
        <el-descriptions-item label="角色">
          <el-tag size="small">{{role}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="密码">
          <el-button style="border: none;color: #4285F4">修改密码</el-button>
        </el-descriptions-item>

      </el-descriptions>
          <div style="position: absolute;bottom: 100px;left: auto">
<!--            <el-button style="border: solid 1px #4285F4;border-radius: 20px;width: 150px;color: #4285F4">切换账号</el-button>-->
            <el-button @click="tuichu" style="border: solid 1px red;border-radius: 20px;width: 150px;color: red">退出登录</el-button>
          </div>
    </el-tab-pane>
<!--    <el-tab-pane label="Role">Role</el-tab-pane>-->
<!--    <el-tab-pane label="Task">Task</el-tab-pane>-->
  </el-tabs>
</template>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>